<template>
  <div class="jiayi-container news_info" v-loading="loading">
    <Header/>
    <div class="breadcrumb_header" v-show="!loading">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>
          <el-link type="primary" @click="gotoHome" class="font">首页</el-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <el-link type="success" :underline="false" @click="gotoNews" class="font">新闻动态：{{news?.typeDTO?.name}}</el-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="font">{{news.name}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main" v-show="!loading">
      <image-preview :src="news.poster" class="preview"/>
      <div class="option_sub"/>
      <Card class="ql-editor context" v-html="news.info" border-radius="0.3rem"/>
    </div>
    <div class="call_me" v-show="!loading">
      <Call_me/>
    </div>
  </div>
</template>

<script>
import Header from "@/views/jiayi/header";
import Call_me from "@/views/jiayi/call_me_sub";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {get_newsInfo} from "@/api";
import {decodeBase64, encodeBase64} from "@/utils/zzDouUtils/objUtil";


export default {
  name: "Jiayi_news",
  components: {Call_me,Header},
  computed: {},
  data() {
    return {
      loading: true,
      doc: { },
      news: {},
    };
  },
  watch: {
  },
  mounted() {

  },
  created(){
    get_newsInfo(decodeBase64(this.$route.query.j)).then(response=>{
      this.news = response.data;
      this.loading = false;
    })
  },
  methods: {
    gotoNews(){
      this.$router.push({path: '/news/type',query:{ j :encodeBase64(this.news.typeId)}})
    },
    gotoHome(){
      this.$router.push({path: '/'})
    }
  }
};
</script>

<style scoped>
.news_info{
  width: 100vw;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.breadcrumb_header{
  padding: 1.3rem;
  width: 85%;
  height: 7%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.breadcrumb_header  .font{
  font-size: 1.1rem;
}

.main{
  min-height: 48%;
  width: 70%;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  padding: 0.2rem;
  position: relative;
}

.option_sub{
  width: 25%;
}

.preview{
  position: fixed;
  width: 20rem;
  height: 20rem;
}

.context{
  width: 70%;
  padding: 1rem;
}
::v-deep .ql-editor img{
  max-width: 100%;
}

.call_me{
  margin-top:4%;
  width: 100%;
  background: #E4E7ED;
}

/*------- 响应式布局 -------*/
/* 手机（小屏幕） */
@media (width <= 992px) {
  html{
    font-size: 14px;
  }
  .breadcrumb_header{
    width: 100%;
  }
  .breadcrumb_header .font{
    font-size: 0.9rem;
  }
  .main{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  .preview{
    position: relative;
    width: 95%;
    height: 20rem;
  }
  .context{
    width: 100%;
    padding: 1rem;
  }
}

/* 平板 */
@media (width > 992px) and (width < 1200px) {
  html{
    font-size: 12px;
  }
}

@media (width > 992px) {

}

</style>
